<template>
    <div class="header">
        <Hamburger class="hamburger-container" :toggleClick="onShowMenu" :isActive="isMenuShowGetter"></Hamburger>

        <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand" menu-align="start">
                <span class="el-dropdown-link">
                    <img class="user-logo" src="../../../static/img/img.jpg">
                    {{name}}
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="personalData">{{$t('header.userData')}}</el-dropdown-item>
                    <el-dropdown-item command="loginout">{{$t('header.SignOut')}}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-select v-model="thisLang" @input="changeLan()" value="English" style="width: 130px;margin-left: 20px">
                <el-option v-for="(val, key) in lanData" :value="key" :key="key">{{val.nativeName}}</el-option>
            </el-select>
        </div>
    </div>
</template>
<script>
    import { mapGetters,mapActions,mapMutations } from 'vuex';
    import Levelbar from '../layout/levelbar';
    import Hamburger from 'components/hamburger';
    import cookieFunc from '../../assets/script/cookie.js';
    import common from '../../assets/script/common';
    import enLocale from 'element-ui/lib/locale/lang/en';
    import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
    import locale from 'element-ui/lib/locale';
    export default {
        components: {
            Levelbar, Hamburger
        },
        data() {
            return {
                name: '',
                thisLang: '中文',
                lanName:'Chinese',
                locales: ['en-US', 'zh']
            }
        },
        created() {
            this.getUsername();
            this.getCookieChangeLan();
        },
        computed:{
            ...mapGetters([
                "lanData",
                "currentLan",
                "isMenuShowGetter"
            ])
        },
        methods:{
            ...mapMutations([
                'setCurrentLan',
                'getLanChoice',
                'changePersonalDataShow',
                'changeMenuShow'
            ]),
            onShowMenu() {
                let isMenuShow = !this.$store.state.menu.isMenuShow;
                this.changeMenuShow(isMenuShow);
            },
            elementLocales(elLocale) {
                if(elLocale === 'en-US'){
                    locale.use(enLocale);
                }else if(elLocale === 'zh-CN'){
                    locale.use(zhLocale);
                }
            },
            getCookieChangeLan() {
                let hasChoiceData = JSON.stringify(this.lanData);
                if (cookieFunc.getCookie("lanName") !== null) {
                    let cookieLanName = cookieFunc.getCookie("lanName");
                    this.setCurrentLan(cookieLanName);
                    this.$i18n.locale = cookieLanName;
                    this.elementLocales(cookieLanName);
                    if(hasChoiceData == '{}'){
                        console.log(cookieLanName);
                        let sessionLanChoice = JSON.parse(sessionStorage.getItem('lanChoice'));
                        console.log(typeof sessionLanChoice);
                        this.thisLang = sessionLanChoice[cookieLanName].nativeName;
                        this.getLanChoice(sessionLanChoice);
                    }else {
                        this.thisLang = this.lanData[cookieLanName].nativeName;
                    }
                }else{
                    if(this.currentLan !== ''){
                        hasChoiceData = JSON.parse(hasChoiceData);
                        this.thisLang = hasChoiceData[this.currentLan].nativeName;
                    }else{
                        //检测浏览器语言
                        let currentLang = navigator.language;   //判断除IE外其他浏览器使用语言
                        if(!currentLang){//判断IE浏览器使用语言
                            currentLang = navigator.browserLanguage;
                        }
                        if(hasChoiceData == '{}'){
                            let sessionLanChoice = JSON.parse(sessionStorage.getItem('lanChoice'));
                            this.thisLang = sessionLanChoice[currentLang].nativeName;
                            this.getLanChoice(sessionLanChoice);
                            this.setCurrentLan(currentLang);
                            this.$i18n.locale = currentLang;
                            this.elementLocales(currentLang);
                        }else {
                            this.thisLang = this.lanData[currentLang].nativeName;
                        }
                    }
                }
            },
            changeLan() {
                cookieFunc.setCookie("lanName",this.thisLang,"h1");
                this.setCurrentLan(this.thisLang);
                this.elementLocales(this.thisLang);
                this.$i18n.locale = this.thisLang;
                this.thisLang = this.lanData[this.thisLang].nativeName;
            },
            getUsername() {
                let username = sessionStorage.getItem("username");
                this.name = username === '' ? 'linxin' : username;
            },
            handleCommand(command) {
                let self = this;
                if(command == 'loginout'){
                    self.$router.push('/login');
                }else if(command == 'personalData'){
                    self.changePersonalDataShow(true);
                }
            }
        }
    }
</script>
<style lang="stylus">
    .header
        position relative
        box-sizing border-box
        width 100%
        height 50px
        font-size 22px
        line-height 50px
        color #fff
        background-color #eef1f6
        .hamburger-container
            line-height 58px
            height 50px
            float left
            padding 0 10px
        .logo
            float left
            width 388px
            padding-left 20px
    .user-info
        float right
        padding-right 50px
        font-size 16px
        color #48576A
        .el-dropdown-link
            position relative
            display inline-block
            padding-left 50px
            color #48576A
            cursor pointer
            vertical-align middle
        .user-logo
            position absolute
            left 0
            top 4px
            width 40px
            height 40px
            border-radius 50%
</style>
